<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LangGraph FastAPI Demo</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
        }

        .header p {
            font-size: 1.2em;
            opacity: 0.9;
        }

        .content {
            padding: 30px;
        }

        .demo-section {
            margin-bottom: 40px;
            border: 1px solid #e0e0e0;
            border-radius: 10px;
            overflow: hidden;
        }

        .demo-header {
            background: #f8f9fa;
            padding: 20px;
            border-bottom: 1px solid #e0e0e0;
        }

        .demo-header h3 {
            color: #333;
            margin-bottom: 5px;
        }

        .demo-header p {
            color: #666;
            font-size: 0.9em;
        }

        .demo-body {
            padding: 20px;
        }

        .input-group {
            margin-bottom: 15px;
        }

        .input-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 600;
            color: #333;
        }

        .input-group input, .input-group textarea {
            width: 100%;
            padding: 12px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 14px;
            transition: border-color 0.3s;
        }

        .input-group input:focus, .input-group textarea:focus {
            outline: none;
            border-color: #667eea;
        }

        .btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            transition: transform 0.2s;
        }

        .btn:hover {
            transform: translateY(-2px);
        }

        .btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }

        .result {
            margin-top: 20px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
            border-left: 4px solid #667eea;
        }

        .result h4 {
            color: #333;
            margin-bottom: 10px;
        }

        .result pre {
            background: #2d3748;
            color: #e2e8f0;
            padding: 15px;
            border-radius: 6px;
            overflow-x: auto;
            font-size: 12px;
            line-height: 1.4;
        }

        .loading {
            text-align: center;
            padding: 20px;
            color: #666;
        }

        .spinner {
            border: 3px solid #f3f3f3;
            border-top: 3px solid #667eea;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            animation: spin 1s linear infinite;
            margin: 0 auto 10px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .info-card {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 10px;
            border-left: 4px solid #667eea;
        }

        .info-card h4 {
            color: #333;
            margin-bottom: 10px;
        }

        .info-card p {
            color: #666;
            font-size: 0.9em;
            line-height: 1.5;
        }

        .footer {
            background: #f8f9fa;
            padding: 20px;
            text-align: center;
            color: #666;
            border-top: 1px solid #e0e0e0;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🚀 LangGraph FastAPI Demo</h1>
            <p>展示LangGraph各种功能的完整演示项目</p>
        </div>

        <div class="content">
            <div class="grid">
                <div class="info-card">
                    <h4>📚 API文档</h4>
                    <p>访问 <a href="/docs" target="_blank">/docs</a> 查看完整的API文档和交互式测试界面。</p>
                </div>
                <div class="info-card">
                    <h4>❤️ 健康检查</h4>
                    <p>访问 <a href="/health" target="_blank">/health</a> 检查服务状态。</p>
                </div>
                <div class="info-card">
                    <h4>🧪 测试脚本</h4>
                    <p>运行 <code>python test_api.py</code> 进行自动化测试。</p>
                </div>
            </div>

            <!-- 基础图执行 -->
            <div class="demo-section">
                <div class="demo-header">
                    <h3>🔗 基础图执行 (Basic Graph)</h3>
                    <p>简单的线性工作流，展示消息处理和响应生成的基本流程</p>
                </div>
                <div class="demo-body">
                    <div class="input-group">
                        <label for="basic-message">输入消息:</label>
                        <input type="text" id="basic-message" value="你好，请介绍一下你自己" placeholder="输入您的消息">
                    </div>
                    <button class="btn" onclick="testBasicGraph()">🚀 测试基础图</button>
                    <div id="basic-result" class="result" style="display: none;"></div>
                </div>
            </div>

            <!-- 条件分支图 -->
            <div class="demo-section">
                <div class="demo-header">
                    <h3>🔄 条件分支图 (Conditional Graph)</h3>
                    <p>基于输入内容的智能路由，展示多路径执行流程</p>
                </div>
                <div class="demo-body">
                    <div class="input-group">
                        <label for="conditional-message">输入消息:</label>
                        <input type="text" id="conditional-message" value="请帮我解答一个问题" placeholder="输入包含'问题'、'任务'或'聊天'的消息">
                    </div>
                    <button class="btn" onclick="testConditionalGraph()">🔄 测试条件分支</button>
                    <div id="conditional-result" class="result" style="display: none;"></div>
                </div>
            </div>

            <!-- 并行执行图 -->
            <div class="demo-section">
                <div class="demo-header">
                    <h3>⚡ 并行执行图 (Parallel Graph)</h3>
                    <p>多任务并行处理，展示结果合并和同步机制</p>
                </div>
                <div class="demo-body">
                    <div class="input-group">
                        <label for="parallel-message">输入消息:</label>
                        <input type="text" id="parallel-message" value="执行并行任务" placeholder="输入您的消息">
                    </div>
                    <button class="btn" onclick="testParallelGraph()">⚡ 测试并行执行</button>
                    <div id="parallel-result" class="result" style="display: none;"></div>
                </div>
            </div>

            <!-- 状态管理 -->
            <div class="demo-section">
                <div class="demo-header">
                    <h3>💾 状态管理 (State Management)</h3>
                    <p>会话状态维护，用户偏好跟踪和执行历史记录</p>
                </div>
                <div class="demo-body">
                    <div class="input-group">
                        <label for="state-message">输入消息:</label>
                        <input type="text" id="state-message" value="我喜欢编程" placeholder="输入包含'喜欢'或'不喜欢'的消息">
                    </div>
                    <button class="btn" onclick="testStateManagement()">💾 测试状态管理</button>
                    <div id="state-result" class="result" style="display: none;"></div>
                </div>
            </div>

            <!-- 工具调用 -->
            <div class="demo-section">
                <div class="demo-header">
                    <h3>🔧 工具调用 (Tool Calling)</h3>
                    <p>外部API集成，多工具协调和结果聚合处理</p>
                </div>
                <div class="demo-body">
                    <div class="input-group">
                        <label for="tool-message">输入消息:</label>
                        <input type="text" id="tool-message" value="查询天气信息" placeholder="输入您的消息">
                    </div>
                    <button class="btn" onclick="testToolCalling()">🔧 测试工具调用</button>
                    <div id="tool-result" class="result" style="display: none;"></div>
                </div>
            </div>

            <!-- 循环图 -->
            <div class="demo-section">
                <div class="demo-header">
                    <h3>🔄 循环图 (Loop Graph)</h3>
                    <p>迭代处理逻辑，条件循环控制和循环历史跟踪</p>
                </div>
                <div class="demo-body">
                    <div class="input-group">
                        <label for="loop-message">输入消息:</label>
                        <input type="text" id="loop-message" value="开始循环处理" placeholder="输入您的消息">
                    </div>
                    <div class="input-group">
                        <label for="loop-iterations">最大迭代次数:</label>
                        <input type="number" id="loop-iterations" value="3" min="1" max="10">
                    </div>
                    <button class="btn" onclick="testLoopGraph()">🔄 测试循环图</button>
                    <div id="loop-result" class="result" style="display: none;"></div>
                </div>
            </div>

            <!-- 错误处理 -->
            <div class="demo-section">
                <div class="demo-header">
                    <h3>⚠️ 错误处理 (Error Handling)</h3>
                    <p>异常捕获和处理，重试机制和备用方案执行</p>
                </div>
                <div class="demo-body">
                    <div class="input-group">
                        <label for="error-message">输入消息:</label>
                        <input type="text" id="error-message" value="执行有风险的操作" placeholder="输入您的消息">
                    </div>
                    <div class="input-group">
                        <label for="error-retries">最大重试次数:</label>
                        <input type="number" id="error-retries" value="2" min="1" max="5">
                    </div>
                    <button class="btn" onclick="testErrorHandling()">⚠️ 测试错误处理</button>
                    <div id="error-result" class="result" style="display: none;"></div>
                </div>
            </div>
        </div>

        <div class="footer">
            <p>LangGraph FastAPI Demo - 享受使用LangGraph构建强大的AI工作流！</p>
        </div>
    </div>

    <script>
        const API_BASE = 'http://localhost:8000';

        async function makeRequest(endpoint, data) {
            try {
                const response = await fetch(`${API_BASE}${endpoint}`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(data)
                });

                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                return await response.json();
            } catch (error) {
                throw new Error(`请求失败: ${error.message}`);
            }
        }

        function showLoading(elementId) {
            const element = document.getElementById(elementId);
            element.style.display = 'block';
            element.innerHTML = `
                <div class="loading">
                    <div class="spinner"></div>
                    <p>正在处理请求...</p>
                </div>
            `;
        }

        function showResult(elementId, result) {
            const element = document.getElementById(elementId);
            element.style.display = 'block';
            element.innerHTML = `
                <h4>✅ 执行结果</h4>
                <pre>${JSON.stringify(result, null, 2)}</pre>
            `;
        }

        function showError(elementId, error) {
            const element = document.getElementById(elementId);
            element.style.display = 'block';
            element.innerHTML = `
                <h4>❌ 执行错误</h4>
                <pre style="color: #e53e3e;">${error}</pre>
            `;
        }

        async function testBasicGraph() {
            const message = document.getElementById('basic-message').value;
            showLoading('basic-result');

            try {
                const result = await makeRequest('/basic-graph', {
                    input_data: { message }
                });
                showResult('basic-result', result);
            } catch (error) {
                showError('basic-result', error.message);
            }
        }

        async function testConditionalGraph() {
            const message = document.getElementById('conditional-message').value;
            showLoading('conditional-result');

            try {
                const result = await makeRequest('/conditional-graph', {
                    input_data: { message }
                });
                showResult('conditional-result', result);
            } catch (error) {
                showError('conditional-result', error.message);
            }
        }

        async function testParallelGraph() {
            const message = document.getElementById('parallel-message').value;
            showLoading('parallel-result');

            try {
                const result = await makeRequest('/parallel-graph', {
                    input_data: { message }
                });
                showResult('parallel-result', result);
            } catch (error) {
                showError('parallel-result', error.message);
            }
        }

        async function testStateManagement() {
            const message = document.getElementById('state-message').value;
            showLoading('state-result');

            try {
                const result = await makeRequest('/state-management', {
                    input_data: { message }
                });
                showResult('state-result', result);
            } catch (error) {
                showError('state-result', error.message);
            }
        }

        async function testToolCalling() {
            const message = document.getElementById('tool-message').value;
            showLoading('tool-result');

            try {
                const result = await makeRequest('/tool-calling', {
                    input_data: { message }
                });
                showResult('tool-result', result);
            } catch (error) {
                showError('tool-result', error.message);
            }
        }

        async function testLoopGraph() {
            const message = document.getElementById('loop-message').value;
            const maxIterations = parseInt(document.getElementById('loop-iterations').value);
            showLoading('loop-result');

            try {
                const result = await makeRequest('/loop-graph', {
                    input_data: { 
                        message,
                        max_iterations: maxIterations
                    }
                });
                showResult('loop-result', result);
            } catch (error) {
                showError('loop-result', error.message);
            }
        }

        async function testErrorHandling() {
            const message = document.getElementById('error-message').value;
            const maxRetries = parseInt(document.getElementById('error-retries').value);
            showLoading('error-result');

            try {
                const result = await makeRequest('/error-handling', {
                    input_data: { 
                        message,
                        max_retries: maxRetries
                    }
                });
                showResult('error-result', result);
            } catch (error) {
                showError('error-result', error.message);
            }
        }
    </script>
</body>
</html>
